<template>
  <el-cascader v-model="slval" :options="options" :props="defaultProps" placeholder="选择区域" :disabled="disabled" :style="{width}" @change="handleChange" />
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import areaLists from '@/api/area'
import { getTenArea } from '@/api/plant'
// console.log("areaLists:",areaLists)

const props = defineProps({
  modelValue: '',
  disabled: {
    type: Boolean,
    default() {
      return false // 默认
    }
  },
  width: {
    type: String,
    default: '100%'
  }
})
const emit = defineEmits(['change', 'update:modelValue'])

const slval = ref('')
const options = ref([])
const defaultProps = reactive({
  children: 'children',
  label: 'fullname',
  value: 'fullname' // code
})

watch(() => props.modelValue, (n, o) => {
  slval.value = n
})

onMounted(() => {
  getTenArea().then(res => {
    const province_list = res.data.result[0] // 所有省份
    const city_list = res.data.result[1] // 所有城市（不分省份）
    const area_list = res.data.result[2] // 所有区域（不分省份、城市）
    // options.value = res.data.result[0]
    console.log(province_list)
    province_list.forEach(item => {
      const cur_province = item // 当前省份
      const start = cur_province.cidx[0] // 当前省份对应的城市在city_list数组中的开始下标
      const end = cur_province.cidx[1] // 当前省份对应的城市在city_list数组中的介绍下标
      const cur_province_citys = [] // 当前省份下的所有城市
      for (let i = start; i <= end; i++) {
        cur_province_citys.push(city_list[i])
      }
      // 把查找到的所有城市放到当前省份下的children中
      cur_province.children = cur_province_citys
      options.value.push(cur_province)
    })

    console.log('options.value:', options.value)
  })

  // options.value = areaLists
})

const handleChange = (value) => {
  // console.log(value)
  emit('update:modelValue', value)
  if (value && value.length > 0) {
    emit('change', { province: value[0], city: value[1], area: value[2] })
  } else {
    emit('change', '')
  }
}

</script>
